<template>
  <div class="BlogComment-container"  >
    <div>{{data}}</div>

    <MessageArea  title="评论列表" :List="data" :isLoading='isLoading' @handleSubmit="handlePost" />
  </div>
</template>
<script>
import MessageArea from "@/components/MessageArea";
import { submitComment } from "@/api/getBlogBody";
import { submitData } from "@/api/getBlogBody";
export default {
  components: {
    MessageArea,
  },
  data() {
    return {
      data: "",
      page: 1,
      limit: 10,
      isLoading: true,
    };
  },
  async created() {
    this.data = await submitComment(
      this.page,
      this.limit,
      this.$route.params.id
    );
    this.isLoading=false;
    this.$bus.$on("MainScroll", this.handleScroll);
  },
   computed: {
    //  判断评论是否加载完成
    haveMore() {
      //如果数据还有返回真,没有了返回假
      return this.data.row.length < this.data.total;
    },
  },
  methods: {
    // 评论提交数据
    async handlePost(item, callback) {
      const resp = await submitData(...item, this.$route.params.id);
      this.data.row.unshift(resp);
      this.data.total++;
      callback();
    },
    //处理滚动事件
    handleScroll(dom) {
      //scrollHeight元素内容高度包括溢出不可见的
      // clientHeight元素高度
      //scrollTop元素中的内容”超出“元素上边界”的那部分的高度。//滚动条滚动距离
      // loading为真不许加载更多
      if(this.isLoading){
        return;
      }
      if (dom.scrollHeight - (dom.scrollTop + dom.clientHeight) <= 50) {
        this.nextPage();
      }
    },
    //加载下一页
    async nextPage() {
      //判断如果没有数据了就停止执行下边的代码
      if (!this.haveMore) {
        return;
      }
      this.isLoading = true;
      this.page++;
      const resp = await submitComment(
        this.page,
        this.limit,
        this.$route.params.id
      );
      this.data.total = resp.total;
      this.data.row = this.data.row.concat(resp.row);
      this.isLoading = false;
    },
  },
 
};
</script>

<style lang="less" scoped>
.BlogComment-container {
  position: relative;
}
</style>